<template>
  <div class="recommend">
    <Card>
      爆款推荐
    </Card>

    <ul>
      <li>
        <img v-lazy="this.baseUrl + '/img/recommend/1.jpeg'">
        <div>
          <span class="name">铁观音2號250g</span>
          <span class="content">核心产区滋味正 </span>
          <span class="price">￥128</span>
        </div>
      </li>
      <li>
        <img v-lazy="this.baseUrl + '/img/recommend/2.jpeg'">
        <div>
          <span class="name">正山小种3號150g</span>
          <span class="content">难以忘怀的桂花香</span>
          <span class="price">￥99</span>
        </div>
      </li>
      <li>
        <img v-lazy="this.baseUrl + '/img/recommend/3.jpeg'">
        <div>
          <span class="name">黑檀镂空六君子</span>
          <span class="content">给生活一点精致的仪式感</span>
          <span class="price">￥45</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
import Card from '@/components/home/Card'
</script>

<style lang="less" scoped>
.recommend {
  background-color: #fff;

  ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 10px;

    li {
      height: 145px;
      width: 360px;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      img {
        width: 100%;
        height: 100%;
      }
      div {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 180px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: right;
        padding-right: 15px;
        row-gap: 3px;

        .name {
          color: #666666;
          font-size: 13px;
        }
        .content {
          font-size: 15px;
        }
        .price {
          margin-top: 15px;
          font-size: 18px;
          color: #b0352f;
        }
      }
    }

  }
}
</style>